<template>
  <div class="fountain-container">
    <div class="fountain">
      <div :style="{height: waterHeight}" class="water-list">
        <div class="water water1"></div>
        <div class="water water2"></div>
        <div class="water water3"></div>
        <div class="water water4"></div>
        <div class="water water5"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fountain',
  props: ['waterHeight'],
  data () {
    return {
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
@keyframes water1 {
  to{
    transform: translate3d(-.1rem, 3.6rem, 0)
  }
}
@keyframes water2 {
  to{
    transform: translate3d(-.05rem, 3.6rem, 0)
  }
}
@keyframes water3 {
  to{
    transform: translate3d(0rem, 3.6rem, 0);
  }
}
@keyframes water4 {
  to{
    transform: translate3d(.05rem, 3.6rem, 0)
  }
}
@keyframes water5 {
  to{
    transform: translate3d(.1rem, 3.6rem, 0)
  }
}
.fountain-container{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  .fountain{
    position:absolute;
    width:.2rem;
    height:.2rem;
    // border:1px solid #FFF;
    left:50%;
    transform:translate3d(-50%,0,0);
    bottom: 30.55555%;
    .water-list{
      position:relative;
      margin-left:-.1rem;
      overflow:hidden;
      width:.4rem;
      // height:1.8rem;
      // border:1px solid #FFF;
    }
    .water{
      position:absolute;
      overflow:hidden;
      top:.1rem;
      left:.1rem;
      left:50%;
      margin-left:-.04rem;
      width:.08rem;
      border-radius:.08rem;
      background-color:rgba(255, 255, 255, 0.67);
    }
    .water1{
      height:.3rem;
      animation:water1 1s linear .3s infinite;
    }
    .water2{
      height:.4rem;
      animation:water2 1s linear .6s infinite;
    }
    .water3{
      height:.5rem;
      animation:water3 1s linear .9s infinite;
    }
    .water4{
      height:.4rem;
      animation:water4 1s linear .6s infinite;
    }
    .water5{
      height:.3rem;
      animation:water5 1s linear 3s infinite;
    }
  }
}
</style>
